<template>
  <a-card hoverable>
    <template #cover>
        <template class="center">
          <img
            style="width: 315px;"
            alt="头像"
            :src="user.avatar"
          />
        </template>
    </template>
    <template #actions>
      <div>
        <a-button type="primary" @click="visible = true">修改头像</a-button>

        <a-modal
          v-model:visible="visible"
          title="修改头像"
          ok-text="确认"
          cancel-text="取消"
          @ok="handleOk"
        >
          <a-upload
            v-model:file-list="fileList"
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :headers="auth"
            :action="$store.state.web.serverAddress+'/codes/oss/fileoss'"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img
              v-if="avatarUrl"
              style="width: 100%"
              :src="avatarUrl"
              alt="avatar"
            />
            <div v-else>
              <loading-outlined v-if="loading"></loading-outlined>
              <plus-outlined v-else></plus-outlined>
              <div class="ant-upload-text">修改头像</div>
            </div>
          </a-upload>
        </a-modal>
      </div>
    </template>
    <a-card-meta title="个人介绍" :description="usercard.brief"> </a-card-meta>
  </a-card>
</template>

<script>
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { reactive, ref } from "@vue/reactivity";
import { useStore } from "vuex";
import userApi from "@/apis/userApi";

export default {
  name: "AvatarCard",
  props: {
    usercard: {
      type: Object,
      required: true,
    },
  },
  components: {
    LoadingOutlined,
    PlusOutlined,
  },
  setup(props) {
    const store = useStore();

    let user = reactive({
      avatar: "",
      brief: "",
    });

    let avatarUrl = ref("");

    const auth = reactive({
      Authorization: "token:" + store.state.user.info.access,
    });

    const visible = ref(false);

    user = JSON.parse(JSON.stringify(props.usercard));

    const update_avatar = () => {};

    const handleOk = () => {
      userApi
        .updateAvatarURL(avatarUrl.value, store.state.user.info.access)
        .then((resp) => {
          user.avatar = avatarUrl.value;
          store.state.user.info.avatar = avatarUrl.value;
          visible.value = false;
          if (resp.code === 200) {
            avatarUrl.value = "";
            message.success(`修改头像成功`);
          }
        });
    };

    const fileList = ref([]);
    const loading = ref(false);
    const handleChange = (info) => {
      if (info.file.status !== "uploading") {
        loading.value = true;
      }
      if (info.file.status === "done") {
         loading.value = false;
        message.success(`${info.file.name} 上传成功`);
        avatarUrl.value = info.file.response.data.url;
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} 上传失败.`);
      }
    };

    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        message.error("照片只能是jpg和png!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error("图片大小不能超过2MB!");
      }
      return isJpgOrPng && isLt2M;
    };

    return {
      user,
      update_avatar,
      visible,

      auth,
      fileList,
      loading,
      avatarUrl,
      handleChange,
      beforeUpload,

      handleOk,
    };
  },
};
</script>

<style scoped>
template.center {
  justify-content: center;
  align-items: center;
  display: flex;
}
</style>